.dagreLayout-page3 {
  .relation-node {
    position: absolute;
    width: 200px;
    min-height: 36px;
    padding: 0;
    box-shadow: #000;
    border-radius: 5px;
    cursor: pointer;
    background: #04cdf0;
    &:hover {
      opacity: 0.9;
      background: #22c1de;
    }
    .logo-container {
      width: 100%;
      height: 100%;
      border: none;
      padding: 6px;
      line-height: 24px;
      word-break: break-all;
      word-break: break-word;
      text-align: center;
      margin: auto;
      display: inherit;
      background: none;
      color: #fff;
      font-size: 13px;
      border-radius: 5px;
    }
    .titlestyle {
      &:hover {
        color: #bfff00;
      }
    }
    .class-1 {
      background: #666666;
    }
    .class0 {
      background: #67C23A;
    }
    .class1 {
      background: #01a0c7;
    }
    .class2 {
      background: #e1e143;
    }
    .class3 {
      background: #ffcc01;
    }
    .class4 {
      background: #fa686b;
    }
    .class5 {
      background: #fe6625;
    }
    .class6 {
      background: #fe0000;
    }
    .class7 {
      background: #99cf17;
    }
    .class8 {
      background: #7a8d93;
    }
    .class9 {
      background: #babbb3;
    }
    .onactive {
      box-shadow: 0 0 10px 5px #4207af;
      color:#000
    }
    //.class-1 {
    //  background: #000000;
    //}
    //.class0 {
    //  background: red;
    //}
    //.class1 {
    //  background: #0f0;
    //}
    //.class2 {
    //  background: #00eaff;
    //}
    //.class3 {
    //  background: #60a5ab;
    //}
    //.class4 {
    //  background: #3220a9;
    //}
    //.class5 {
    //  background: #960c2c;
    //}
    //.class6 {
    //  background: #285659;
    //}
    //.class7 {
    //  background: #ff8000;
    //}
    //.class8 {
    //  background: #bfff00;
    //}
    //.class9 {
    //  background: #98175c;
    //}
    //.class10 {
    //  background: #0800ff;
    //}
    //.class11 {
    //  background: #4a1993;
    //}
  }
}
